<template>
  <div class="EnterpriseInfo">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>企业中心</el-breadcrumb-item>
      <el-breadcrumb-item>企业资料</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图·-->
    <el-card class="box-card">
      <section>
        <div class="main-information">
          <div
            class="basic-information"
            style="padding-bottom: 0px; padding-top: 20px"
          >
            <div class="content">
              <div class="title">
                <span class="bar"></span>
                <span>基础信息</span>
              </div>
            </div>
          </div>
          <div class="card" v-show="!showEdit">
            <div class="left">
              <!-- <lable>你是谁？</lable> -->
              <label for="comName"
                ><span style="padding-right: 2px">*</span>公司名称</label
              >
              <input
                v-model="comName"
                type="text"
                name="comName"
                required=""
                autocomplete="off"
                :class="choose"
              />
              <label for=" personName "
                ><span style="padding-right: 2px">*</span>姓名</label
              >
              <input
                v-model="personName"
                type="text"
                name=" personName"
                required=""
                autocomplete="off"
                :class="choose"
              />
              <label for="phone"
                ><span style="padding-right: 2px">*</span>电话</label
              >
              <input
                v-model="phone"
                type="text"
                name="phone"
                required=""
                autocomplete="off"
                :class="choose"
              />
            </div>
            <div class="right">
              <label for="comAddress"
                ><span style="padding-right: 2px">*</span>所在地</label
              >
              <input
                v-model="comAddress"
                type="text"
                name="comAddress"
                required=""
                autocomplete="off"
                :class="choose"
              />
              <label for="position"
                ><span style="padding-right: 2px">*</span>职称</label
              >
              <input
                v-model="position"
                type="text"
                name="position"
                required=""
                autocomplete="off"
                :class="choose"
              />
              <label for="email"
                ><span style="padding-right: 2px">*</span>邮箱</label
              >
              <input
                v-model="email"
                type="text"
                name="email"
                required=""
                autocomplete="off"
                class="main-input"
              />
              <div>
                <el-button
                  v-show="!showEdit"
                  class="main-button"
                  @click="editMainInfo"
                >
                  <div class="big-one">
                    <div class="icon-box">
                      <span class="icon-edict">
                        <span class="icon"></span>
                        <span>编辑</span>
                      </span>
                    </div>
                  </div>
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 以下是信息编辑 -->
        <div class="main-information" v-show="showEdit">
          <div
            class="add"
            v-show="showEdit"
            style="background: rgb(248, 249, 251)"
          >
            <div class="add-title">编辑基本信息</div>
          </div>
          <div class="card">
            <div class="left">
              <!-- <lable>你是谁？</lable> -->
              <label for="eComName"
                ><span style="padding-right: 2px">*</span>公司名称</label
              >
              <input
                v-model="eComName"
                type="text"
                name="EComName"
                required=""
                autocomplete="off"
                :class="choose"
              />
              <label for="ePersonName"
                ><span style="padding-right: 2px">*</span>姓名</label
              >
              <input
                v-model="ePersonName"
                type="text"
                name="ePersonName"
                required=""
                autocomplete="off"
                :class="choose"
              />
              <label for="ePhone"
                ><span style="padding-right: 2px">*</span>电话</label
              >
              <input
                v-model="ePhone"
                type="text"
                name="ePhone"
                required=""
                autocomplete="off"
                :class="choose"
              />

              <div></div>
            </div>
            <div class="right">
              <label for="eComAddress"
                ><span style="padding-right: 2px">*</span>所在地</label
              >
                <div  class='like-input' >
                  <input
                v-model="eComAddress"
                type="text"
                name="eComAddress"
                required=""
                autocomplete="off"
                :class="choose"
              /></div>
              
              <label for="ePosition"
                ><span style="padding-right: 2px">*</span>职称</label
              >
              <!-- <input
                v-model="ePosition"
                type="text"
                name="ePosition"
                required=""
                autocomplete="off"
                :class="choose"
              /> -->
              <div  class='like-input' >
                <el-form style="dispaly: inline-block; width: 100%">
                  <el-select 
                    v-model="ePosition"
                    placeholder="请选择您的职位"
                   style="dispaly: inline-block; width: 100%"
                  >
                    <el-option label="HR" value="HR"  ></el-option>
                    <el-option label="总裁" value="总裁"></el-option>
                  </el-select>
              </el-form>
              </div>
              <label for="email"
                ><span style="padding-right: 2px">*</span>邮箱</label
              >
              <input
                v-model="email"
                type="text"
                name="email"
                required=""
                autocomplete="off"
                class="main-input"
              />
              <div>
                <el-button
                  v-show="!showEdit"
                  class="main-button"
                  @click="editMainInfo"
                >
                  <div class="big-one">
                    <div class="icon-box">
                      <span class="icon-edict">
                        <span class="icon"></span>
                        <span>编辑</span>
                      </span>
                    </div>
                  </div>
                </el-button>
                <!-- button部分 -->
                <div class="button" v-show="showEdit">
                  <div class="button-box">
                    <el-button
                      style="margin-top: 12px; float: right"
                      @click="finishEdit"
                      >完成</el-button
                    >
                    <span
                      style="
                        display: inline-block;
                        float: right;
                        width: 19px;
                        height: 10px;
                      "
                    ></span>
                    <el-button
                      style="margin-top: 12px; float: right"
                      @click="cancelEditMainInfo"
                      >取消</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 以下是基础信息 -->
        <div class="basic-information">
          <div class="content">
            <div class="title">
              <span class="bar"></span>
              <span>公司详细描述</span>
            </div>
            <!-- 公司详细描述 -->
            <div class="inside-content" v-show="!showDetailedInfo">
              <div class="big-one">
                {{ comCharacte }}
                <span class="dividing-line"></span>
                <span>{{ scale }}</span>

                <div class="icon-box">
                  <span class="icon-delete">
                    <span class="icon"></span>
                    <span>删除</span>
                  </span>
                  <span class="icon-edict" @click="editDetailedInfo">
                    <span class="icon"></span>
                    <span>编辑</span>
                  </span>
                </div>
              </div>
              <div class="big-one">
                公司详细描述：
                <span class="normal">{{ detailedInfo }}</span>
              </div>
            </div>
          </div>
          <!-- 编辑详细信息 -->
          <div class="add" v-show="showDetailedInfo">
            <div class="add-title" style="margin-bottom: 10px">
              编辑公司详细信息
            </div>
            <div class="card" style="padding-top: 2px">
              <div class="left">
                <!-- <lable>你是谁？</lable> -->
                <label for="eComCharacte"
                  ><span style="padding-right: 2px">*</span>公司性质</label
                >
                <input
                  v-model="eComCharacte"
                  type="text"
                  name="eComCharacte"
                  required=""
                  autocomplete="off"
                  class="input"
                />
                <label for="eScale"
                  ><span style="padding-right: 2px">*</span>公司规模</label
                >
                <input
                  v-model="eScale"
                  type="text"
                  name="eScale"
                  required=""
                  autocomplete="off"
                  class="input"
                />
              </div>
              <div class="right"></div>
            </div>
            <div class="long">
              <div class="all">
                <textarea
                  v-model="eDetailedInfo"
                  type="text"
                  name="eDetailedInfo"
                  required=""
                  autocomplete="off"
                  placeholder="请详细描述贵公司"
                />
              </div>
            </div>
            <div class="button">
              <div class="button-box">
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="finishDetailedInfo"
                  >完成</el-button
                >
                <span
                  style="
                    display: inline-block;
                    float: right;
                    width: 19px;
                    height: 10px;
                  "
                ></span>
                <el-button
                  style="margin-top: 12px; float: right"
                  @click="editDetailedInfo"
                  >取消</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </section>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comName: "有限公司",
      personName: "Alan",
      position: "HR",
      comAddress: "成都",
      phone: "13396891750",
      email: "",
      detailedInfo: "该公司建于，，",
      comCharacte: "互联网行业",
      scale: "1000余人",
      //信息填写
      eComName: "",
      ePersonName: "",
      ePosition: "",
      eComAddress: "",
      ePhone: "",
      eDetailedInfo: "",
      eComCharacte: "",
      eScale: "",

      // 基础信息选择
      showEdit: false,
      choose: "main-input",
      showDetailedInfo: false,
    };
  },
  methods: {
    editMainInfo() {
      this.choose = "edit-input";
      this.showEdit = true;
      this.eComName = this.comName;
      this.ePosition = this.position;
      this.eComAddress = this.comAddress;
      this.ePhone = this.phone;
      this.eEmail = this.email;
      this.ePersonName = this.personName;
    },
    // 完成编辑
    finishEdit() {
      console.log(this.showEdit);
      this.choose = "main-input";
      this.showEdit = false;
      this.comName = this.eComName;
      this.personName = this.ePersonName;
      this.comAddress = this.eComAddress;
      this.phone = this.ePhone;
      this.email = this.eEmail;
      this.position = this.ePosition;
    },
    cancelEditMainInfo() {
      this.choose = "main-input";
      this.showEdit = false;
    },

    editDetailedInfo() {
      this.showDetailedInfo = !this.showDetailedInfo;
      this.eDetailedInfo = this.detailedInfo;
      this.eComCharacte = this.comCharacte;
      this.eScale = this.scale;
    },
    finishDetailedInfo() {
      this.showDetailedInfo = !this.showDetailedInfo;
      this.detailedInfo = this.eDetailedInfo;
      this.comCharacte = this.eComCharacte;
      this.scale = this.eScale;
    },
  },
};
</script>

<style lang="less" scoped>


/deep/.el-input--suffix .el-input__inner {
 
  display: inline-block;
        margin-bottom: 20px;
         height:38px;
        font-size: 14px;
        border: 1px solid #e3e7ed;
        outline: none;
        border-radius: 5px;
        color: #414a60;
        background-color: #fff;
        font-size: 17px;
}
.box-card {
  .card {
    width: 100%;
    display: flex;
    padding-top: 20px;
    flex-direction: row;
    background: rgb(248, 249, 251);
    justify-content: center;
    height: auto;
    .left {
      padding: 0px 0px 20px 0;
      // 保持间距
      margin-right: 15%;
      min-width: 30%;
      height: auto;
      //  background: red;
      display: flex;
      flex-direction: column;
      // border-right: 1px solid black;
      // border-left: 1px solid black;
      label {
        padding: 10px 0px 10px 0;
      }
      input {
        display: inline-block;
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding-left: 5px;
        margin-bottom: 20px;
        font-size: 14px;
        border: 1px solid #e3e7ed;
        outline: none;

        border-radius: 5px;
        color: #414a60;
        background-color: #fff;

        font-size: 17px;
        // transition: border .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out;
        // 无法输入
        // pointer-events: none;
         box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
      }
      input:hover {
        border: 1px solid rgba(76, 108, 154, 1);
        box-shadow: 0px 1px 5px rgba(158, 178, 210);
      }
      .like-input{
        display: inline-block;
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding-left: 5px;
        margin-bottom: 20px;
        font-size: 14px;
        border: 1px solid #e3e7ed;
        outline: none;

        border-radius: 5px;
        color: #414a60;
        background-color: #fff;

        font-size: 17px;
      }
      .main-input {
        pointer-events: none;
      }
      .edit-input {
        pointer-events: auto;
      }
    }

    .right {
      padding: 0px 0 20px 0;
      min-width: 30%;
      height: auto;
      // border-left: 1px solid black;
      //  border-right: 1px solid black;
      // background: blue;
      display: flex;
      flex-direction: column;


      label {
        padding: 10px 0px 10px 0;
      }
      input {
        display: inline-block;
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding-left: 5px;
        margin-bottom: 20px;
        font-size: 14px;
        border: 1px solid #e3e7ed;
        outline: none;

        border-radius: 5px;
        color: #414a60;
        background-color: #fff;

        font-size: 17px;
        // transition: border .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out;
        // 无法输入
        // pointer-events: none;
          box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      }
      input:hover {
        border: 1px solid rgba(76, 108, 154, 1);
        box-shadow: 0px 1px 5px rgba(158, 178, 210);
      }
      .main-input {
        pointer-events: none;
      }
      .edit-input {
        pointer-events: auto;
      }

      .main-button {
        margin-top: 12px;
        display: online-block;
        width: 100px;
        height: auto;
        float: right;
        &:hover {
          .card & {
            background: red;
          }
        }
      }
    }
  }
  .add {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .add-title {
      padding-top: 20px;
      width: 75%;
      font-size: 18px;
      font-weight: bold;
      color: rgba(76, 108, 154, 1);
    }
    .long {
      width: 100%;
      display: flex;

      justify-content: center;
      .all {
        width: 75%;
        display: flex;
        flex-direction: column;
        label {
          padding: 10px 0px 10px 0;
        }
        textarea {
          display: inline-block;
          width: 100%;
          min-height: 60px;
          line-height: 38px;
          padding-left: 5px;
          margin-bottom: 20px;
          font-size: 14px;
          border: 1px solid #e3e7ed;
          outline: none;

          border-radius: 5px;
          color: #414a60;
          background-color: #fff;

          font-size: 17px;
          // transition: border .2s ease-in-out,background-color .2s ease-in-out,box-shadow .2s ease-in-out;
        }
        input:hover {
          border: 1px solid rgba(76, 108, 154, 1);
          box-shadow: 0px 1px 5px rgba(158, 178, 210);
        }
      }
    }
    // 编辑完成按钮
    .button {
      width: 100%;
      display: flex;
      justify-content: center;
      .button-box {
        width: 75%;
      }
    }
  }
  .basic-information {
    padding: 0 60px 60px 60px;
    background: rgb(248, 249, 251);
    // background:red;
    // 分割线
    .title {
      display: flex;
      align-items: center;
      padding-top: 15px;
      font-weight: bold;
      font-size: 18px;
      font-weight: 400;
      .bar {
        width: 3px;
        height: 16px;
        background: rgba(76, 108, 154, 1);
        margin-right: 6px;
      }
    }
    .inside-content {
      // 原样式
      background: none;
      outline: none;
      border: none;
      letter-spacing: 1px;
      width: 100%;
      padding-top: 20px 0 10px 10px;
      padding-left: 10px;
      min-height: 30px;
      margin-top: 15px;
      line-height: 35px;
      color: #61687c;
      background: #fff;
      .big-one {
        font-size: 18px;
        font-weight: 545;
        color: rgba(76, 108, 154, 1);
        .dividing-line {
          display: inline-block;
          width: 1.5px;
          height: 10px;
          background: #61687c;
          margin-right: 10px;
          margin-left: 10px;
        }
        .normal {
          color: #61687c;
          font-size: 16px;
        }
        .icon-box {
          float: right;
          display: flex;
          align-content: flex-end;
          padding-right: 15px;
          color: #1296db;
          font-size: 15px;
          cursor: pointer;

          .icon-delete {
            display: flex;
            align-content: center;
            margin-right: 5px;
            .icon {
              display: inline-block;
              padding: 0;
              height: 25px;
              width: 28px;
              background: url(../../assets/img/delete.png) no-repeat;
              background-size: cover;
              // background:red;
            }
          }
          .icon-delete:hover {
            background: rgba(242, 245, 249, 1);
          }
          .icon-edict {
            display: flex;
            align-content: center;

            .icon {
              display: inline-block;
              padding: 0;
              height: 25px;
              width: 28px;
              // background: url(../../assets/img/edict.png) no-repeat;
              // background-size: cover;
              background: url(../../assets/img/edict.png) no-repeat;
              background-size: cover;
              // background:red;
            }
          }
          .icon-edict:hover {
            background: rgba(242, 245, 249, 1);
          }
        }
      }
    }
    .inside-content:hover {
      background: rgba(242, 245, 249, 1);
    }
    .add {
      display: flex;
      flex-direction: column;
      align-content: center;
    }
  }
}
</style>